<template>
  <div class="bikeDetail-wrap">
    <!--自行车详情-->

    <!--立即租赁-->
    <!--        如果没有登陆 => 跳到登录-->
    <!--        判断是否有足够库存 => 提示-->
    <!--        如果登录了 => 判断 所需积分 》 账户技分-->
    <!--        如果当前用户未还车，不能再次租赁-->
    <!--        是否正在租赁此车-->
    <!--        bike messages  status null 0 2-->
    <!-- 留言输入框【登录之后】 -->
    <!-- 留言列表 -->
    <div class="bike-detail">
      <div class="bike-detail-right">
        <div class="bike-title basePadding">
          {{ArticleDetail.title}}
          <!-- <span style="font-size: 13px;color: indianred">(正在租赁)</span> -->
        </div>
        <div class="price-jiFen basePadding">
          <span style="color: #49AF4F">作者 ：</span>
          <span style="font-size: 13px;">{{ArticleDetail.adminId}}</span>
        </div>
        <div class="price-jiFen basePadding">
          <span style="color: #49AF4F">发布时间 ：</span>
          <span style="font-size: 13px;">{{ArticleDetail.createdAt}}</span>
        </div>
        <div class="price-jiFen basePadding">
          <span style="color: #49AF4F">阅读量 ：</span>
          <span style="font-size: 13px;">{{ArticleDetail.readCount}}</span>
        </div>
        <div class="border"></div>
        <!-- <div class="bike-size basePadding">
          <span style="color: #888888">尺寸：</span>
          {{}}
        </div>
        <div class="bike-count basePadding">
          <span>库存：{{}}辆</span>
        </div>-->
        <div class="bike-desc basePadding" v-html="ArticleDetail.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArticleDetail } from "../../../api";
import { formatTime } from "../../../common/js/myFun";
export default {
  name: "ArticleDetail",
  data() {
    return {
      ArticleDetail: {}
    };
  },
  mounted() {
    let body = document.documentElement || document.body;
    body.scrollTop = 0;

    this.getArticleDetail();
  },
  methods: {
    getArticleDetail() {
      let articleId = this.$route.params.articleId;
      getArticleDetail({
        articleId
      }).then(res => {
        if (res.code === 200) {
          res.result.article.createdAt = formatTime(
            res.result.article.createdAt
          );
          this.ArticleDetail = res.result.article;
        } else {
          this.$message({
            message: res.data,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.bikeDetail-wrap {
  min-height: 1000px;
  padding-top: 20px;
  background-color: #EEEEEE;
}

.bike-detail {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;

  .bike-detail-right {
    width: 100%;
    padding: 20px;

    .basePadding {
      padding-bottom: 12px;
    }

    .bike-title {
      font-size: 23px;
      font-weight: 700;
    }

    .price-jiFen {
    }

    .border {
      margin: 20px 0;
      border-bottom: 1px solid #ccc;
    }

    .bike-desc {
      font-size: 16px;
      line-height 30px
      overflow: hidden;
    }

    .bike-size {
    }

    .end-time {
      .nums {
        margin-left: 10px;
      }
    }

    .bike-type-list {
    }
  }
}

.user-message-main {
  width: 1200px;
  min-height: 400px;
  border-radius: 5px;
  margin: 20px auto;
  padding: 30px;
  background-color: #fff;
}

.message-intro {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;

  .intro-desc {
  }
}

.user-message-list {
  .message-item {
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid #eee;

    .user-name {
      font-size: 13px;
      color: #49AF4F;
      padding: 10px 0;
    }
  }
}
</style>
